<template>
  <div style="height: 100%;overflow:hidden">
    <x-header :left-options="{backText:'',preventGoBack:true}" @on-click-back="backhome">
      用户反馈
      <!-- <a slot="right" @click="start()">启动</a> -->
    </x-header>
    <div class="add_form_new" @click="start()">发起</div>

    <div class="userBackListDiv">
      <v-touch
        v-on:swiperight="onSwipeRight"
        :swipe-options="{direction: 'horizontal'}"
        style="margin-bottom: 60px;"
      >
        <div>
          <group v-for="(item, i) in userBackList" gutter="-1px" :key="i">
            <div title :border-intent="false" @click="openInfo(item)">
              <div
                class="more-box"
                style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;"
              >
                <!-- <div class="box-bar">
              <div style="font-size:16px">{{item.HAZARDCLAUSE}}</div>
                </div>-->
                <div class="project_style">
                  <span style="display:inline-block">{{item.BACKTITLE}}</span>
                </div>
             
                <div class="fill_user" style="margin-top:8px">
                  <span class="gray-label" style="margin-right: 10px;">反馈人员:</span>
                  {{item.INPUTUSERNAME}}
                </div>
                <div class="state_time_style">
                  <div name="state">
                    <img
                      src="@/assets/img/undo.png"
                      v-if="item.STATE=='未完成'"
                      style="height: 24px;"
                    />
                    <img
                      src="@/assets/img/done.png"
                      style="height: 24px;"
                      v-if="item.STATE=='已完成'"
                    />
                  </div>
                  <div class="fill_time">
                    <span class="gray-label" style="margin-right: 5px;">反馈时间:</span>
                    {{item.INPUTDATE.substring(0,10)}}
                  </div>
                </div>
              </div>
            </div>
          </group>
        </div>
      </v-touch>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import { constants } from "crypto";
export default {
  name: "userBack",

  data() {
    return {
      userBackList: [],
      pageIndex: 1,
      pageSize: 9999999
    };
  },

  created() {
    this.getUserBackInfo();
  },

  methods: {
    onSwipeRight() {
      this.$router.push("/index/home");
    },
    backhome() {
      this.$router.push("/index/home");
    },
    //获取用户反馈列表
    getUserBackInfo() {
      // var params =
      //   '{"_method":"component.getListData","_param":{"bizObj":"PMBASE_USERBACK2","service":"selectMore","fields":"*","filter":"STATE <> \'废弃\'","currentPageIndex":' +
      //   this.pageIndex +
      //   ',"pageSize":' +
      //   this.pageSize +
      //   ',"orderList":[{"field":"INPUTDATE","order":"desc"}],"QueryFormData":""}}';

     var params = {
       _method:"component.getListData",
       _param:{
          bizObj:"PMBASE_USERBACK2",
          service:"selectMore",
          fields:"*",
          filter:{
            phone:{}
          },
          currentPageIndex:this.pageIndex,
          pageSize: this.pageSize,
          orderList:[{
            field:"INPUTDATE",
            order:"desc"
          }],
          QueryFormData:""
       }
     }   
     this.$ajax({
        url:
          this.COMMON_URL +
          "?_objName=PMBASE_USERBACK2&_viewId=PMBASE_USERBACK2_list",
        method: "post",
        data: {
          FixJSON:JSON.stringify(params) 
        }
      }).then(res => {
        console.log(res);
        this.userBackList = res.data.datas;
        console.log(this.userBackList);
      });
    },
    openInfo(item) {
      this.$router.push({
        path: "userBackDetailInfo",
        name: "userBackDetailInfo",
        params: {
          item: item
        }
      });
    },
    start() {
      this.$router.push({
        path: "/startUserBack",
        name: "startUserBack"
      });
    }
  }
};
</script>

<style scoped>
.userBackListDiv {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  padding-top: 3px;
  overflow: auto;
}
.userBackList {
  padding: 16px 20px 16px 20px;
  margin: 10px 10px;
  background-color: #ffffff;
}
/* .transition-view /deep/ .content .vux-header .vux-header-right a, .vux-header .vux-header-right button{
        color:#262A34;
    } */
/* .transition-view /deep/ .content .vux-header .vux-header-right{
        font-size: 14px !important;
    } */
.ys {
  display: flex;
  flex-flow: column;
}
/* .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before{
        border-color: #cccccc;
    } 
    .transition-view /deep/ .content .vux-header .vux-header-title{
        color: #262A34;
    } */
.labelText {
  color: #ccc;
}
.textDiv {
  display: flex;
}
.add_form_new {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 80%;
  z-index: 999;
  left: 80%;
  background: rgba(77, 134, 255, 1);
  box-shadow: 0px 1px 13px 0px rgba(79, 132, 220, 0.6);
  border-radius: 50%;
  color: #ffffff;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project_style{
  font-size:15px;
font-family:PingFang SC;
font-weight:400;
color:rgba(25,25,25,1);
line-height:20px;
margin-top: 8px
}
.fill_time{
  margin-left: auto;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175,175,175,1);
  line-height: 20px;
}
.fill_user{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175,175,175,1);
  line-height: 20px;
}
.state_time_style{
  display: flex;
  margin-top: 8px;
}
</style>
